// pages/Home/index.jsx - 修复后的首页组件
import { Link } from 'react-router-dom'
import './style.css'

const Home = () => {
  return (
    <div className="home-page">
      <div className="home-hero-container">
        <div className="home-hero-content">
          <div className="home-logo-section">
            <div className="home-ai-logo">🤖</div>
            <h1>AI 智能面试系统</h1>
            <p className="home-tagline">专业 • 智能 • 高效</p>
          </div>
          
          <div className="home-description">
            <p>基于人工智能的专业面试评测平台</p>
            <ul className="home-features">
              <li>🎯 多维度智能评估</li>
              <li>📊 实时情绪分析</li>
              <li>🎤 语音交互面试</li>
              <li>📱 专业面试报告</li>
            </ul>
          </div>
          
          <div className="home-action-section">
            <Link to="/prep" className="home-start-interview-btn">
              开始面试
            </Link>
            <p className="home-start-tip">
              准备好简历，确保摄像头和麦克风正常工作
            </p>
          </div>
        </div>
        
        <div className="home-hero-visual">
          <div className="home-interview-preview">
            <div className="home-preview-screen">
              <div className="home-ai-interviewer">
                <div className="home-ai-avatar">👨‍💼</div>
                <div className="home-speech-bubble">
                  <p>您好，欢迎参加面试！</p>
                  <div className="home-typing-dots">
                    <span></span>
                    <span></span>
                    <span></span>
                  </div>
                </div>
              </div>
              <div className="home-user-camera">
                <div className="home-camera-placeholder">📹</div>
                <span>您的摄像头</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div className="home-stats-section">
        <div className="home-stat-item">
          <div className="home-stat-number">10,000+</div>
          <div className="home-stat-label">成功面试</div>
        </div>
        <div className="home-stat-item">
          <div className="home-stat-number">95%</div>
          <div className="home-stat-label">准确率</div>
        </div>
        <div className="home-stat-item">
          <div className="home-stat-number">24/7</div>
          <div className="home-stat-label">随时可用</div>
        </div>
      </div>
    </div>
  )
}

export default Home